@import 'variables'
@import 'nib'
@import 'mixins'

#editor
  cursor: default
  user-select: none
  min-height: 72px
  position: relative
  top: 0
  left: 0
  right: 0
  z-index: 100
  margin: 0 24px 0px 24px

  .file-bar
    color: #fff
    height: 39px
    display: none
    background: #69707E
    line-height: 39px
    padding: 0 0 0 24px
    overflow: hidden
    &.enabled
      display: block
    .title
      float: left;
      line-height: 39px - 1px
      font-size: 14px
      font-weight: bold
      margin-right: 28px
      max-width: 180px
      text-overflow: ellipsis
      white-space: nowrap
      overflow: hidden
      &:before
        color: #fdcc59
        padding-right: 2px
    ul.file-actions
      display: flex
      li
        padding: 0
        border-left: 1px solid #575D69
        &.modified
          a
            border-top: 3px solid #FDCC59
            line-height: 34px
      li:last-child
        border-right: 1px solid #575D69
      a
        color: #fff
        line-height: 39px
        padding: 0 10px
        &:hover
          &:before
            color: #fff
        &:before
          color: #CFD5E1
          margin-right: 5px
        &.button
          width: 38px
          text-align: center
          font-size: 15px
          &:before
            margin-right: 0

  .starred
    display: none
    position: absolute
    &.enabled
      display: block


  textarea
    opacity: 0 // avoid being displayed before CodeMirror has loaded

  .view-editor
    transist: all
    min-height: 0%
    overflow-y: auto
    position: absolute
    left: 0
    right: 0
    top: 0
    background-color: #EFEFF4
    box-shadow: 0 1px 4px rgba(0,0,0,0.1)

  .message-bar
    height: 49px
    line-height: 49px
    padding: 0 24px
    color: #FFF
    overflow: hidden
    z-index: 100
    position: relative
    left: 0
    right: 0
    bottom: 0
    a
      color: #fff
    .actions
      a
        font-size: 16px
        position: absolute
        top: 10px
        right: 10px
        line-height: 30px
        width: 30px
        text-align: center
        border-radius: 3px
        border: none
        &:hover
          background-color: rgba(0,0,0,0.4)
    i
      border-bottom: 1px dotted #FFF
    code
      border: none
      background-color: #fff
    &.error
      background-color: color-error
      code
        color: color-error
        cursor: pointer
    &.info
      background-color: color-link
      code
        color: color-link
        cursor: pointer

  ul.controls
    z-index: 1000
    absolute: top 20px right 8px
    .divider
      margin: 0 6px
      width: 1px
      padding: 0
      background-color: #E4E9F1
    li
      padding: 0px
      padding-left: 8px
    // 2.x behavior
    a.balled
      transist: all 0.2s
      transform: scale(1)
      box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1)
      text-shadow: 0 1px 0px rgba(0, 0, 0, 0.1)
      color: #fff
      border: 2px solid white
      background-color: #E5E5E7
      cursor: default
      display: inline-block
      width: 34px
      height: 34px
      text-align: center
      border-radius: 50%
      vertical-align: middle

      &.active
        cursor: pointer
        box-shadow: none
        text-shadow: none
        color: #BABABB
        border: 2px solid #BCBEC0
        background-color: #fff

        &:hover
          transform: scale(1.2)

        &.success
          &:hover
            color: color-success
            border: 2px solid color-success
        &.golden
          &.enabled
            color: #fff
            background-color: color-star
            border: 2px solid darken(color-star, 8%)
          &.changed
            background-color: #fff
            color: color-star
            border: 2px solid darken(color-star, 8%)
          &:hover
            color: #fff
            background-color: color-star
            border: 2px solid darken(color-star, 8%)
        &.add
          &:hover
            color: color-link
            border: 2px solid color-link

      [class*="sl-"]
        font-size: 32px
        line-height: 32px
        position: relative
        // &.sl-play-circle
        // &.sl-star-circle
    a.circled
      // transist: all 0.2s
      transform: scale(1)
      color: #d2d2d3
      // border: 2px solid white
      // background-color: #E5E5E7
      cursor: default
      display: inline-block
      width: 28px
      height: 28px
      font-size: 28px
      line-height: 32px
      text-align: center
      border-radius: 50%
      vertical-align: middle

      &.active
        cursor: pointer
        box-shadow: none
        text-shadow: none
        color: #717172
        // border: 2px solid #BCBEC0
        // background-color: #fff

        // &:hover
        //   transform: scale(1.2)

        &.play
          &:hover
            color: color-button-hover
            // background-color: color-button-hover
            // border: 2px solid color-success
        &.favorites
          &.enabled, &.enabled:hover
            color: color-favorites
            // background-color: color-button-hover
            // background-color: color-star
            // border: 2px solid darken(color-star, 8%)
          &.changed
            color: color-favorites
            // border: 2px solid darken(color-star, 8%)
          &:hover
            color: color-button-hover
            // background-color: color-button-hover
            // border: 2px solid darken(color-star, 8%)
        &.delete
          &:hover
            color: color-button-hover
            // background-color: color-button-hover
            // border: 2px solid color-link
// [class*="sl-"]
//   font-size: 32px
//   line-height: 32px
//   position: relative
// &.sl-play-circle
// &.sl-star-circle
